<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{$site.name|htmlentities}</title>
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
    <link href="__CDN__/assets/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</head>
<style>
    body{
        width: 100%;
        overflow: hidden;
        background: #eee;
        
    }
    .swiper-container {
      width: 100%;
      max-height: 200px;
      overflow: hidden;
      position: relative;
      
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide img{
        width: 100%;
    }
    .choose{
        display: flex;
        margin-top: 40px;

    }
    .littleimg{
        margin-left: 10px;
        margin-right: 10px;
    }
    .littleimg img{
        width: 10px;
        
    }
    .classlist{
        display: flex;
        margin-top: 10px;
        overflow-x: scroll;       /* 启用水平滚动 */
    }
    .classitem{
        border: 0px solid;
        border-radius: 20px;  /* 设置圆角半径为 10px */
        background: #ccc;
        margin-left: 5px;
        margin-right: 5px;
        white-space: nowrap;  /* 防止文字换行 */
        padding: 5px 15px;
    }
    .storelist{
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        margin-top: 10px;
    }
    .storeitem {
        width: 100%; /* 每个storeitem默认占据一行 */
        display: flex;
        
       
        background: #fff;
        
        
        margin: 5px;
        /* box-sizing: border-box; */
    }
    .storeimg img{
        width: 50px;
        height: 50px;
        margin: 10px 10px  10px 10px;
    }
    .storename{
        margin-top: 10px;
        font-size: 14px;
        font-weight: bold; /* 主营内容加粗 */
    }
    .storecontent{
        font-size: 12px;
        margin-top: 10px;
    }
    .userinfo{
        position: absolute;
        top: 150px;
        z-index: 999;
        background: #fff;
        width: 90%;
        left: 50%; /* 使其左边缘距离父容器的中心 */
        transform: translateX(-50%); /* 将其自己偏移回去，达到居中的效果 */
        display: flex;
        /* padding: 10px 10px; */
    }
    .userimg img{
        width: 50px;
        height: 50px;
        margin: 10px 10px 10px 10px;
    }
    .user{
        width: 65%;
        margin-top: 10px;
    }
    .username{
        font-weight: bold;
    }
    .phone{
        margin-top: 5px;
    }

    .order{
        font-size: 12px;
        width: 60px;
        margin-top: 10px;
    }
    .orderimg{
        width: 20px;
        margin: 0 auto;
        margin-bottom: 10px;
        
    }
    .orderimg img{
        width: 100%;
        max-width: 100%;
        padding: 0; /* 移除内边距 */
        margin: 0;  /* 移除外边距 */
    }
    .footers{
        position: fixed;  /* 固定在页面底部 */
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px 15px;
        font-size: 12px;
    }
    .tabbar{
        display: flex;
        justify-content: space-between; /* 子元素之间的间距相等 */
    }
    .tabbar img{
        width: 20px;
        height: 20px;
    }
    .item{
        display: flex;
        flex-direction: column; /* 设置为列布局（上下结构） */
        justify-content: center; /* 垂直居中 */
        align-items: center; /* 水平居中 */
        text-align: center; /* 确保文本水平居中 */
    }
    
</style>
<body>

<div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
          <div class="swiper-slide"><img src="http://canyin.qianzeweb.com/uploads/20250205/f363679053be71813ee9cb1eaa6dd4ea.jpg"></div>
          <div class="swiper-slide"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
        </div>
    
        
    </div>
    <div class="userinfo">
        <div class="userimg"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
        <div class="user">
            <div class="username">lijing</div>
            <div class="phone">18395614414</div>
        </div>
        <div class="order">
            <div class="orderimg"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div><div>我的订单</div>
        </div>
    </div>
    <div class="choose">
        <div class="littleimg"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
        <div class="rest">选择餐厅 >></div>
    </div>
    <div class="classlist">
        <div class="classitem">全部</div>
        <div class="classitem">全部的分类</div>
        <div class="classitem">全部的手势</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
        <div class="classitem">全部</div>
    </div>
    <div class="storelist">
        <div class="storeitem">
            <div class="storeimg"><img src="http://canyin.qianzeweb.com/uploads/20250205/f363679053be71813ee9cb1eaa6dd4ea.jpg"></div>
            <div class="store">
                <div class="storename">门店名称</div>
                <div class="storecontent">主营：</div>
            </div>
        </div>

        <div class="storeitem">
            <div class="storeimg"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
            <div class="store">
                <div class="storename">门店名称</div>
                <div class="storecontent">主营：</div>
            </div>
        </div>

        <div class="storeitem">
            <div class="storeimg"><img src="http://canyin.qianzeweb.com/uploads/20250205/f363679053be71813ee9cb1eaa6dd4ea.jpg"></div>
            <div class="store">
                <div class="storename">门店名称</div>
                <div class="storecontent">主营：</div>
            </div>
        </div>

        <div class="storeitem">
            <div class="storeimg"><img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg"></div>
            <div class="store">
                <div class="storename">门店名称</div>
                <div class="storecontent">主营：</div>
            </div>
        </div>


    </div>
</div>

<div class="footers">
    <div class="tabbar">
        <a class="item">
            <img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg">
            <div>首页</div>
        </a>
        <a class="item">
            <img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg">
            <div>点餐</div>
        </a>
        <a class="item">
            <img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg">
            <div>订单</div>
        </a>
        <a class="item">
            <img src="http://canyin.qianzeweb.com/uploads/20250113/35c3207e975934a6c92443f1ec156f29.jpg">
            <div>我的</div>
        </a>
    </div>
</div>

<script>
    // 初始化 Swiper
    const swiper = new Swiper('.swiper-container', {
      loop: true,  // 启用循环模式
      autoplay: {
        delay: 3000,  // 每3秒切换一次
      }
    });
    
  </script>
</body>

</html>
